@import 'antd/es/style/themes/default.less';

.container {
  .title-line {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;

    height: 56px;
    margin: 24px 0;
    padding: 0 24px;
    .body-title__text {
      font-size: @heading-4-size;
      

      color: @heading-color;
    }
    .body-title__btns {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;

      width: 80px;
    }
  }
  .calendar-title-list {
    font-size: @font-size-sm;

    padding: 0 8px !important;
    > li {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: 14.285%;
      height: 24px;
    }
  }
  .calendar-list {
    font-size: @font-size-sm;

    padding: 0 8px !important;
    > li {
      position: relative;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: 14.285%;
      height: 56px;

      cursor: pointer;
      user-select: none;
      &.tag {
        &::after {
          position: absolute;
          bottom: 0;
          left: 50%;

          width: 0;
          height: 0;
          margin-left: -4px;

          content: '';

          border-style: solid;
          border-color: transparent transparent #ffca66;
          border-top-width: 8px;
          border-right-width: 4px;
          border-bottom-width: 8px;
          border-left-width: 4px;
        }
      }
      &:hover {
        .calendar-li__text {
          background-color: @grey-3;
        }
      }
      &.active {
        .calendar-li__text {
          color: @text-color-inverse;
          background-color: @primary-color;
        }
      }
      .calendar-li__text {
        line-height: @font-size-lg;

        padding: 4px;

        text-align: center;

        border-radius: @border-radius-base;
      }
    }
  }
}
